import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { ReadOutlined, UserOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons';
import styled from '@emotion/styled';

const StyledCard = styled(Card)`
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

const WelcomeTitle = styled.h1`
  text-align: center;
  margin-bottom: 48px;
  color: #1890ff;
`;

const Home: React.FC = () => {
  return (
    <div>
      <WelcomeTitle>欢迎来到知识平台</WelcomeTitle>
      
      <Row gutter={24}>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="文章总数"
              value={42}
              prefix={<ReadOutlined />}
            />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="用户数量"
              value={128}
              prefix={<UserOutlined />}
            />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="获赞总数"
              value={256}
              prefix={<LikeOutlined />}
            />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="评论数量"
              value={180}
              prefix={<MessageOutlined />}
            />
          </StyledCard>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={16}>
          <StyledCard title="最新文章">
            <p>这里将显示最新发布的文章列表</p>
          </StyledCard>
        </Col>
        <Col span={8}>
          <StyledCard title="热门标签">
            <p>这里将显示热门标签列表</p>
          </StyledCard>
        </Col>
      </Row>
    </div>
  );
};

export default Home; 